<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bilibili 屏蔽词分享平台 | 提交屏蔽词</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <style>
        .filtered {
            color: #eee;
        }

        .misfiltered {
            color: red;
        }

        .successful_filtered {
            color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <input v-model="filter" />
        <textarea v-model="xml_danmu"></textarea>
        <ul v-for="d in danmus" v-bind:class="{'filtered': isFiltered(d),
        'successful_filtered': isFiltered(d)&&targets.indexOf(d)!=-1,
        'misfiltered': (!isFiltered(d)&&targets.indexOf(d)!=-1) || (isFiltered(d)&&protects.indexOf(d)!=-1)
        }">
            <a v-on:click="targets.push(d)">Target</a> <a v-on:click="protects.push(d)">Protect</a> {{d}} </ul>
        <a v-on:click="load">Load</a>

    </div>
    <!-- /container -->

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        var app = new Vue({
            el: '.container',
            data: {
                xml_danmu: "",
                danmus: [],
                filter: "",
                targets: [],
                protects: []
            },
            methods: {
                load: function () {
                    domParser = new DOMParser();
                    xmlDoc = domParser.parseFromString(this.xml_danmu, 'text/xml');
                    x = xmlDoc.documentElement.childNodes;
                    for (i = 0; i < x.length; i++)
                        if (x[i].nodeName == "d" && x[i].childNodes[0]) this.danmus.push(x[i].childNodes[0].nodeValue)
                },
                isFiltered: function (str) {
                    if (str == "") return false;
                    return new RegExp(this.filter).test(str)
                }
            }
        })
    </script>
</body>

</html>